import React, { Component } from 'react'

export default class Home extends Component {
    state = {
        num: 888,
        count: 999,
        list: [1, 2, 3, 4, 5],
        obj: {
            name: "张三",
            age: 18
        }
    }
    changeNum = (num) => {
        this.setState({
            num
        })
    }
    // 修改数组
    changeItem = (index) => {
        // this.state.list[index] += 1
        // this.setState({})

        let list = [...this.state.list]
        list[index] += 1
        this.setState({
            list
        })
    }
    // 修改对象
    changeObj = (name) => {
        let obj = { ...this.state.obj }
        obj.name = name
        this.setState({
            obj
        })
    }
    render() {
        const { num, count, list, obj } = this.state
        return (
            <div>
                {/* 函数传参1 */}
                {/* <h4>
                    { num } <button onClick = { (ev) => {
                        this.changeNum(123, ev)
                    } }>修改数据</button>
                </h4> */}
                {/* 函数传参2 */}
                {/* 不传递参数，默认参数是事件对象 */}
                {/* <h4>
                    {num} <button onClick={ this.changeNum.bind(this, 567) }>修改数据</button>
                </h4> */}
{/* 
                {
                    list.map((item, index) => {
                        return <div key={index}>
                            {item} -- <button onClick={(ev) => {
                                this.changeItem(index)
                            }}>修改数据</button>
                        </div>
                    })
                } */}


                <h3>
                    { obj.name }
                </h3>
                <h3>
                    { obj.age }
                </h3>

                <h4>
                    <button onClick={(ev) => {
                        this.changeObj('李四')
                    }}>修改数据</button>
                </h4>


                {/* <h4>
                    {count}
                </h4> */}
            </div>
        )
    }
}
